<template>
  <div class="audit_detail">
    <div class="audit_content">
      <div v-if="ori === 'supplierAccount'">
        <StoreInfo :form="infoData.info" />
      </div>

      <div v-if="ori === 'supplierCate'">
        <div class="supplier">
          <span class="title">企业名称</span>
          <span class="supplier_name">{{ infoData.info.supplierName }}</span>
        </div>

        <Cate :cates="infoData.catList" :goodsType="infoData.info.goodsType" :ori="ori" />

        <Qualica :list="infoData.qualificationList" />
      </div>

      <AuditRecord :list="infoData.info.operateList" />
    </div>
    <div class="audit_button" v-if="(ori === 'supplierAccount' && infoData.info.accountAuditStatus === 'AUDITING') || (ori === 'supplierCate' && infoData.info.qualificationAuditStatus === 'AUDITING')">
      <Button label="驳回" @click="onRejectClick" />
      <Button type="primary" label="通过" @click="onPassClick" />
    </div>
  </div>

  <Reject v-model:visible="rejectVisible" @change="onRejectChange" />
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import Reject from '@/components/reject/index.vue'
import StoreInfo from '@/components/info/store.vue'
import AuditRecord from '@/components/info/record.vue'
import Cate from '@/components/info/cate.vue'
import Qualica from '@/components/info/qualica.vue'
import Address from '@/components/info/address.vue'
import Pay from '@/components/info/pay.vue'
import Button from '@/components/button/button.vue'

const router = useRouter()
const route = useRoute()

const ori = route.meta.ori || ''
const supplierId = route.params.id

const infoData = reactive({
  info: {},
  rejectedForm: {},
  shippingDetailList: [],
  qualificationList: [],
  catList: []
})

const loading = ref(false)
const rejectVisible = ref(false)

const QualificationTypes = {
  BUSINESS_LICENSE: 1,
  INTERNET_CERTIFICATE: 2,
  MEDICAL_INSTITUTION_PRACTICING_LICENSE: 3,
  MEDICAL_EQUIPMENT_BUSINESS_LICENSE: 4,
  MEDICAL_DEVICE_PRODUCTION_LICENSE: 5,
  MEDICAL_DEVICE_BUSINESS_RECORD_CERTIFICATE: 6
}

const audit = async (operateType, remark) => {
  let url = '/medinstrument/boss/supplier/auditSupplierAccount'
  if (ori === 'supplierCate') {
    url = '/medinstrument/boss/supplier/auditSupplierQualification'
  }
  let supplierAuditForm = {
    supplierName: infoData.info.supplierName,
    supplierId: supplierId,
    operateType: operateType,
    remark: remark
  }
  let { err } = await api.post(url, supplierAuditForm)
  if (err) {
    ElMessage.error(err)
  } else {
    loadData()
    ori === 'supplierCate' ? router.push({ path: '/supplier/cate' }) : router.push({ path: '/supplier/account' })
  }
}

const loadData = async () => {
  loading.value = true
  let url = `/medinstrument/boss/supplier/getSupplierDetailAccount?supplierId=${supplierId}`
  if (ori === 'supplierCate') {
    url = `/medinstrument/boss/supplier/getSupplierDetailCat?supplierId=${supplierId}`
  }
  let { data, err } = await api.get(url)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    if (ori === 'supplierCate') {
      infoData.info = data.supplierVo

      infoData.catList = data.applyApparatusCategoryIds
      infoData.qualificationList = data.supplierVo.supplierQualificationList
    } else {
      infoData.info = data
      infoData.info.supplierQualificationList.sort((a, b) => {
        const ret = QualificationTypes[a.qualificationType] > QualificationTypes[b.qualificationType]
        return ret ? 1 : -1
      })
    }
  }
}

const onRejectClick = () => {
  rejectVisible.value = true
}

const onPassClick = () => {
  ElMessageBox.confirm('是否确认通过审核', '系统', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    showClose: false,
    closeOnClickModal: false,
    closeOnPressEscape: false
  })
    .then(() => {
      audit('PASS', '')
    })
    .catch(() => {})
}

const onRejectChange = (val) => {
  audit('REJECT', val)
}

onMounted(() => {
  loadData()
})
</script>

<style scoped lang="scss">
.audit_detail {
  .audit_content {
    margin: 0 15px 10px 10px;
  }

  .supplier {
    padding: 20px 0 20px 20px;
    margin-top: 10px;
    background-color: #fff;

    .title {
      font-size: 16px;
      line-height: 20px;
      font-weight: 500;
    }

    .supplier_name {
      color: var(--color-text);
      margin-left: 50px;
      font-weight: 500;
    }
  }
}
</style>
